<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/update.css">
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <div class="header_banxin">
            <div class="header_banxin_left">
                <a href="../index.html"><img src="../images/logo.png" alt=""></a>
            </div>
            <div class="header_banxin_right">
                <a href="#">登录</a>
                <a href="html/update.html">注册</a>
            </div>
        </div>
    </div>
    <div id="word">
        <div>真正的注册</div>
        <div>
            <form action="server.php" method="post" id="form">
                用户名:<input type="text" name="user_name" id="inp"><span></span><br>
                密&nbsp;&nbsp;&nbsp;码:<input type="text" name="user_pwd"><br>
                email:&nbsp;<input type="text" name="user_email"><br>
                是否为VIP: <input type="radio" name="user_vip" value="1">是
                <input type="radio" name="user_vip" value="0">否<br>
                <input type="hidden" name="hide" value="register">
                <input type="submit" value="注册">
            </form>
        </div>
    </div>
</body>
<script>
    inp.onblur = e => {
        var e = event;
        var target = e.srcElement;
        var user = target.value;
        if (inp.name == "user_name") {
            var reg = /^(?![\s]+$)[\w\u4e00-\u9fa5]{1,}$/;
            inp.nextElementSibling.innerHTML = "请不要输入空白用户名";
            inp.nextElementSibling.style.color = "red";
        }
        var bool = reg.test(user);
        if (bool) {
            inp.nextElementSibling.innerHTML = ""
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "server.php?hide=getName");
            xhr.send(null);
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var dbName = eval(xhr.responseText);
                    for (var i = 0; i < dbName.length; i++) {
                        if (dbName[i] == user) {
                            target.nextElementSibling.innerHTML = "用户名太受欢迎了";
                            target.nextElementSibling.style.color = "red";
                            return false;
                        }
                    }
                    target.nextElementSibling.innerHTML = "用户名可用";
                    target.nextElementSibling.style.color = "green";
                }
            }
        }
    }
    form.onsubmit = () => {
        if (inp.nextElementSibling.style.color == "red") {
            return false;
        }
    }

</script>

</html>